<template>
	<view class="search_p" :class="{ has_back: back }">
		<view class="back_i" @click="goback()" v-if="back">
			<image class="left_icon_img" src="/static/images/top_back_day.png" mode="widthFix"></image>
		</view>
		<view class="search_view">
			<view class="s_l">
				<view class="s_ii">
					<image class="s_icon" src="/static/images/search.png" mode="widthFix"></image>
				</view>
				<view class="s_inp" @click="inp_click">
					<!-- @input="input_change($event)" -->
					<input
						class="r_view_inp"
						v-model="search_key"
						:placeholder="myplaceholder"
						:focus="myfocus"
						:disabled="url ? true : false"
						placeholder-class="placeholder"
						@confirm="input_change($event)"
					/>
				</view>
			</view>
			<view class="s_r" @click="btn_click">搜索</view>
		</view>
	</view>
</template>

<script>
let input_task = null;
let input_task_time = 500;
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'mysearch',
	props: {
		value: {
			type: [String],
		},
		url: {
			type: [String],
		},
		myfocus: {
			type: [Boolean],
		},
		back: {
			type: Boolean,
			default: false,
		},
		backfun: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			search_key: this.value,
			myplaceholder: '搜索你想要的商品',
			nextback: true,
		};
	},
	beforeCreate() {},
	created() {},
	mounted() {},
	methods: {
		inp_click() {
			if (this.url) {
				this.goweburl_f(this.url);
			} else {
				return true;
			}
		},
		btn_click() {
			if (this.url) {
				this.goweburl_f(this.url);
			} else {
				this.input_change({ type: 'click' });
			}
		},
		input_change(v) {
			// console.log(v, 'input_change')
			let _this = this;
			if (!this.nextback) return;
			this.nextback = false;
			if (_this.url) return;
			let type = v.type;
			if (type == 'input') {
				clearTimeout(input_task);
				input_task = setTimeout(() => {
					_this.com_emit(_this.search_key);
				}, input_task_time);
			} else {
				_this.com_emit(_this.search_key);
			}
		},
		com_emit(k) {
			let _this = this;
			_this.$emit('back_key', k);
			this.$nextTick(() => {
				_this.nextback = true;
			});
		},
		goback(delta = 1) {
			if (this.backfun) {
				this.$emit('topback');
				return;
			} else {
				this.com_page_back();
			}
		},
	},
	watch: {
		value(val) {
			if (val) {
				this.search_key = val;
			}
		},
	},
};
</script>

<style lang="scss">
.left_icon_img {
	width: 40rpx;
	height: 40rpx;
}

.search_p {
	--height: 74rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	height: var(--height);

	&.has_back {
		padding: 0 20rpx 0 10rpx;
	}

	.back_i {
		flex-shrink: 0;
		padding-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search_view {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		background: #ffffff;
		border-radius: calc(var(--height) / 2);
		border: 2rpx solid #1fd1c2;
		padding: 4rpx 4rpx 4rpx 26rpx;

		.s_l {
			display: flex;
			align-items: center;
			flex: 1;

			.s_ii {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.s_icon {
				width: 32rpx;
				height: 32rpx;
			}

			.s_inp {
				padding: 0 8rpx;
				width: 100%;

				.r_view_inp {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
			}
		}

		.s_r {
			flex-shrink: 0;
			width: 128rpx;
			height: 100%;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 30rpx;
			font-weight: 400;
			color: #ffffff;

			background-color: #1fd1c2;
		}
	}
}
</style>
